<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 跨境进口电商</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
        }
        .step-indicator {
            position: relative;
        }
        .step-indicator::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #e5e7eb;
            z-index: -1;
        }
        .step-indicator:last-child::after {
            display: none;
        }
        .step-indicator.completed::after {
            background: #10b981;
        }
        .dark-mode {
            background-color: #1a1a1a;
            color: #ffffff;
        }
        .dark-mode .bg-white {
            background-color: #2d2d2d;
        }
        .dark-mode .text-gray-900 {
            color: #ffffff;
        }
        .dark-mode .text-gray-600 {
            color: #d1d5db;
        }
        .dark-mode .border-gray-200 {
            border-color: #4b5563;
        }
        .dark-mode .bg-gray-50 {
            background-color: #374151;
        }
        .dark-mode .hover:bg-gray-50:hover {
            background-color: #4b5563;
        }
        
        /* 微交互动画 */
        .btn-bounce {
            transition: all 0.2s ease;
        }
        .btn-bounce:hover {
            transform: scale(1.05);
        }
        .btn-bounce:active {
            transform: scale(0.95);
        }
        .product-item {
            transition: all 0.3s ease;
        }
        .product-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 transition-colors duration-300">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <h1 class="text-2xl font-bold text-purple-600">全球购直播</h1>
                    </div>
                    <div class="hidden md:block ml-10">
                        <div class="flex items-baseline space-x-4">
                            <a href="../index.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">首页</a>
                            <a href="../overseas-live-center.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">直播中心</a>
                            <a href="../overseas-shopping.html" class="text-gray-900 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium">海外购商城</a>
                            <a href="index.html" class="text-purple-600 px-3 py-2 rounded-md text-sm font-medium">购物车</a>
                        </div>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <!-- 主题切换 -->
                    <button id="theme-toggle" class="text-gray-600 hover:text-purple-600 p-2 rounded-full hover:bg-gray-100">
                        <i class="fas fa-moon text-xl"></i>
                    </button>
                    <!-- 用户头像 -->
                    <div class="relative">
                        <button class="flex items-center space-x-2 text-gray-700 hover:text-purple-600">
                            <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像">
                            <span class="hidden md:block text-sm font-medium">用户</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 步骤指示器 -->
        <div class="mb-8">
            <div class="flex items-center justify-center">
                <div class="step-indicator completed flex flex-col items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center text-white font-bold">
                        <i class="fas fa-check"></i>
                    </div>
                    <span class="text-sm font-medium text-green-600 mt-2">购物车</span>
                </div>
                <div class="step-indicator flex flex-col items-center">
                    <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center text-white font-bold">
                        2
                    </div>
                    <span class="text-sm font-medium text-gray-600 mt-2">确认订单</span>
                </div>
                <div class="step-indicator flex flex-col items-center">
                    <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center text-white font-bold">
                        3
                    </div>
                    <span class="text-sm font-medium text-gray-600 mt-2">支付</span>
                </div>
                <div class="step-indicator flex flex-col items-center">
                    <div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center text-white font-bold">
                        4
                    </div>
                    <span class="text-sm font-medium text-gray-600 mt-2">完成</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 左侧：购物车商品列表 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg shadow-lg">
                    <div class="p-6 border-b border-gray-200">
                        <h2 class="text-xl font-bold text-gray-900">购物车商品</h2>
                        <p class="text-sm text-gray-600 mt-1">共 3 件商品</p>
                    </div>
                    
                    <div class="p-6 space-y-6">
                        <!-- 商品项 1 -->
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg product-item fade-in">
                            <input type="checkbox" checked class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500">
                            <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-900 mb-1">SK-II 神仙水精华液</h3>
                                <p class="text-sm text-gray-600 mb-2">230ml 日本原装进口</p>
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">现货</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-red-600">¥1,299</div>
                                <div class="text-sm text-gray-500 line-through">¥1,599</div>
                                <div class="flex items-center mt-2 border border-gray-300 rounded">
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-minus text-xs"></i>
                                    </button>
                                    <span class="px-3 py-1 text-sm">1</span>
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-plus text-xs"></i>
                                    </button>
                                </div>
                            </div>
                            <button class="text-red-500 hover:text-red-700 p-2">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>

                        <!-- 商品项 2 -->
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                            <input type="checkbox" checked class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500">
                            <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-900 mb-1">资生堂红腰子精华</h3>
                                <p class="text-sm text-gray-600 mb-2">50ml 抗老修复</p>
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                    <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">现货</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-red-600">¥899</div>
                                <div class="text-sm text-gray-500 line-through">¥1,199</div>
                                <div class="flex items-center mt-2 border border-gray-300 rounded">
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-minus text-xs"></i>
                                    </button>
                                    <span class="px-3 py-1 text-sm">1</span>
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-plus text-xs"></i>
                                    </button>
                                </div>
                            </div>
                            <button class="text-red-500 hover:text-red-700 p-2">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>

                        <!-- 商品项 3 -->
                        <div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
                            <input type="checkbox" checked class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500">
                            <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="商品图片" class="w-20 h-20 object-cover rounded-lg">
                            <div class="flex-1">
                                <h3 class="font-semibold text-gray-900 mb-1">CPB钻石精华</h3>
                                <p class="text-sm text-gray-600 mb-2">30ml 贵妇级护肤</p>
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">包邮包税</span>
                                    <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">预售</span>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-red-600">¥2,599</div>
                                <div class="text-sm text-gray-500 line-through">¥3,199</div>
                                <div class="flex items-center mt-2 border border-gray-300 rounded">
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-minus text-xs"></i>
                                    </button>
                                    <span class="px-3 py-1 text-sm">1</span>
                                    <button class="px-2 py-1 text-gray-600 hover:bg-gray-100">
                                        <i class="fas fa-plus text-xs"></i>
                                    </button>
                                </div>
                            </div>
                            <button class="text-red-500 hover:text-red-700 p-2">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧：订单摘要 -->
            <div class="space-y-6">
                <!-- 费用明细 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">费用明细</h3>
                    
                    <div class="space-y-3">
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">商品总价</span>
                            <span class="font-medium">¥4,797</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">直播优惠</span>
                            <span class="font-medium text-green-600">-¥900</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">优惠券</span>
                            <span class="font-medium text-green-600">-¥100</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">运费</span>
                            <span class="font-medium text-green-600">包邮</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-600">跨境电商综合税</span>
                            <span class="font-medium">¥611</span>
                        </div>
                        <div class="border-t border-gray-200 pt-3">
                            <div class="flex justify-between">
                                <span class="font-semibold text-gray-900">总计</span>
                                <span class="font-bold text-xl text-red-600">¥4,408</span>
                            </div>
                        </div>
                    </div>
                    
                    <button onclick="window.location.href='../payment/index.html'" class="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium mt-6 btn-bounce">
                        去结算
                    </button>
                </div>

                <!-- 跨境购买提示 -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                        <div>
                            <h4 class="text-sm font-medium text-blue-900">跨境购买须知</h4>
                            <p class="text-sm text-blue-700 mt-1">
                                根据海关规定，跨境商品需要提供真实身份信息。单笔订单限额5000元，年度个人限额26000元。
                            </p>
                            <div class="mt-3 text-xs text-blue-600">
                                <div class="flex justify-between">
                                    <span>本年已使用额度：</span>
                                    <span>¥8,234</span>
                                </div>
                                <div class="flex justify-between">
                                    <span>剩余可用额度：</span>
                                    <span>¥17,766</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 服务保障 -->
                <div class="bg-white rounded-lg shadow-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">服务保障</h3>
                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span class="text-sm text-gray-700">正品保障</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shipping-fast text-blue-500"></i>
                            <span class="text-sm text-gray-700">包邮包税</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-undo text-purple-500"></i>
                            <span class="text-sm text-gray-700">7天无理由退货</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-headset text-orange-500"></i>
                            <span class="text-sm text-gray-700">24小时客服</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 支付页面弹窗 -->
    <div id="payment-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-2xl w-full max-h-screen overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">订单确认与支付</h2>
                    <button onclick="closePaymentModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
                
                <div id="payment-content">
                    <!-- 支付内容将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('theme-toggle');
        const body = document.body;
        
        // 检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
        }
        
        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-mode');
            if (body.classList.contains('dark-mode')) {
                themeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>';
            } else {
                themeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>';
            }
        });
        
        // 去结算功能
        function proceedToCheckout() {
            const modal = document.getElementById('payment-modal');
            const content = document.getElementById('payment-content');
            
            content.innerHTML = `
                <div class="space-y-6">
                    <!-- 订单商品列表 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-900 mb-3">订单商品</h3>
                        <div class="space-y-3">
                            <div class="flex items-center space-x-3">
                                <img src="https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900">SK-II 神仙水精华液</p>
                                    <p class="text-xs text-gray-600">230ml</p>
                                </div>
                                <span class="text-sm font-medium">¥1,299</span>
                            </div>
                            <div class="flex items-center space-x-3">
                                <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900">资生堂红腰子精华</p>
                                    <p class="text-xs text-gray-600">50ml</p>
                                </div>
                                <span class="text-sm font-medium">¥899</span>
                            </div>
                            <div class="flex items-center space-x-3">
                                <img src="https://images.unsplash.com/photo-1556228578-8c89e6adf883?ixlib=rb-4.0.3&auto=format&fit=crop&w=60&q=80" alt="商品" class="w-12 h-12 object-cover rounded">
                                <div class="flex-1">
                                    <p class="text-sm font-medium text-gray-900">CPB钻石精华</p>
                                    <p class="text-xs text-gray-600">30ml</p>
                                </div>
                                <span class="text-sm font-medium">¥2,599</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 收货地址 -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 class="font-semibold text-blue-900 mb-3">收货地址</h3>
                        <div class="space-y-2">
                            <div class="flex justify-between text-sm">
                                <span class="text-blue-700">收货人：</span>
                                <span class="text-blue-900">张三</span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-blue-700">手机号：</span>
                                <span class="text-blue-900">138****8888</span>
                            </div>
                            <div class="text-sm">
                                <span class="text-blue-700">地址：</span>
                                <span class="text-blue-900">北京市朝阳区建国门外大街1号</span>
                            </div>
                        </div>
                        <button class="text-blue-600 text-sm hover:text-blue-800 mt-2">
                            <i class="fas fa-edit mr-1"></i>修改地址
                        </button>
                    </div>
                    
                    <!-- 身份信息验证 -->
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <h3 class="font-semibold text-yellow-900 mb-3">身份信息（海关清关所需）</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-yellow-700 mb-1">真实姓名 *</label>
                                <input type="text" placeholder="请输入真实姓名" class="w-full border border-yellow-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-yellow-700 mb-1">身份证号 *</label>
                                <input type="text" placeholder="请输入身份证号" class="w-full border border-yellow-300 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
                            </div>
                        </div>
                        <p class="text-xs text-yellow-600 mt-2">
                            <i class="fas fa-shield-alt mr-1"></i>
                            您的身份信息仅用于海关清关，我们将严格保密并加密存储。
                        </p>
                    </div>
                    
                    <!-- 支付方式选择 -->
                    <div>
                        <h3 class="font-semibold text-gray-900 mb-3">选择支付方式</h3>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-500">
                                <input type="radio" name="payment" value="alipay" class="text-purple-600">
                                <i class="fab fa-alipay text-blue-500 text-xl"></i>
                                <span class="text-sm font-medium">支付宝</span>
                            </label>
                            <label class="flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-500">
                                <input type="radio" name="payment" value="wechat" class="text-purple-600">
                                <i class="fab fa-weixin text-green-500 text-xl"></i>
                                <span class="text-sm font-medium">微信支付</span>
                            </label>
                            <label class="flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-500">
                                <input type="radio" name="payment" value="card" class="text-purple-600">
                                <i class="fas fa-credit-card text-purple-500 text-xl"></i>
                                <span class="text-sm font-medium">银行卡</span>
                            </label>
                            <label class="flex items-center space-x-3 p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-purple-500">
                                <input type="radio" name="payment" value="unionpay" class="text-purple-600">
                                <i class="fas fa-university text-red-500 text-xl"></i>
                                <span class="text-sm font-medium">银联</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 费用明细 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="font-semibold text-gray-900 mb-3">费用明细</h3>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-600">商品总价</span>
                                <span class="font-medium">¥4,797</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">直播优惠</span>
                                <span class="font-medium text-green-600">-¥900</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">优惠券</span>
                                <span class="font-medium text-green-600">-¥100</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-600">跨境电商综合税</span>
                                <span class="font-medium">¥611</span>
                            </div>
                            <div class="border-t border-gray-200 pt-2">
                                <div class="flex justify-between">
                                    <span class="font-semibold">应付总额</span>
                                    <span class="font-bold text-lg text-red-600">¥4,408</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 提交按钮 -->
                    <div class="flex space-x-4">
                        <button onclick="closePaymentModal()" class="flex-1 border border-gray-300 text-gray-700 py-3 rounded-lg hover:bg-gray-50 transition-colors">
                            返回购物车
                        </button>
                        <button onclick="processPayment()" class="flex-1 bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors font-medium">
                            确认支付 ¥4,408
                        </button>
                    </div>
                </div>
            `;
            
            modal.classList.remove('hidden');
        }
        
        // 关闭支付弹窗
        function closePaymentModal() {
            document.getElementById('payment-modal').classList.add('hidden');
        }
        
        // 处理支付
        function processPayment() {
            // 验证身份信息
            const name = document.querySelector('input[placeholder="请输入真实姓名"]');
            const idCard = document.querySelector('input[placeholder="请输入身份证号"]');
            const paymentMethod = document.querySelector('input[name="payment"]:checked');
            
            if (!name.value || !idCard.value) {
                alert('请填写完整的身份信息');
                return;
            }
            
            if (!paymentMethod) {
                alert('请选择支付方式');
                return;
            }
            
            // 模拟支付处理
            alert('正在跳转到支付页面...');
            // 这里可以添加实际的支付逻辑
        }
        
        // 点击弹窗外部关闭弹窗
        document.getElementById('payment-modal').addEventListener('click', (e) => {
            if (e.target.id === 'payment-modal') {
                closePaymentModal();
            }
        });
        
        // 显示通知
        function showNotification(message) {
            const notification = document.createElement('div');
            notification.className = 'fixed top-20 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas fa-check-circle"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>